<template>
  <div class="my-card follow-card">
    <div class="number-board number-board--divider">
      <div class="number-board-item button button--plain">
        <div class="number-board-item-inner" @click="goFollows('follows')">
          <strong class="number-board-item-value">{{ calcNumber(user.infos.fans) }}</strong>
          <div class="number-board-item-name">粉丝</div>
        </div>
      </div>
      <div class="number-board-item button button--plain">
        <div class="number-board-item-inner" @click="goFollows('following')">
          <strong class="number-board-item-value">{{ calcNumber(user.infos.follow) }}</strong>
          <div class="number-board-item-name">关注</div>
        </div>
      </div>
      <div class="number-board-item">
        <div class="number-board-item-inner">
          <strong class="number-board-item-value">{{ calcNumber(user.infos.be_liked) }}</strong>
          <div class="number-board-item-name">获赞</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'follow-card',
  computed: {
    ...mapState({ user: 'showingUser' }),
  },
  methods: {
    calcNumber(number) {
      const num = number;
      if (num >= 10000) {
        const val = (num / 10000).toFixed(1);
        if (val.split('.')[1] === '0') return `${val.split('.')[0]}w`;
        return `${val}w`;
      }
      return num;
    },
    goFollows(type) {
      this.$router.push(`/users/${this.user.id}/following?type=${type}`)
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss">
.follow-card {
  font-size: 14px;
}

.number-board {
  display: flex;
}
.number-board-item {
  flex: 1 1;
  &.button {
    border: 0;
    line-height: unset;
    font-size: unset;
  }

  &.button:hover .number-board-item-name,
  &.button:hover .number-board-item-value { color: #175199; }
}
.number-board-item-inner {
  padding: 12px 0;
  text-align: center;
  color: #646464;
  line-height: 1.6;
}
.number-board-item-value {
  font-size: 20px;
  color: #121212;
  font-weight: 600;
}

.number-board--divider .number-board-item+.number-board-item .number-board-item-inner {
  border-left: 1px solid #ebebeb;
}
</style>
